<template>
  <div class="comment">
    <div class="make_comment">
      <div class="title">
        <span>评论</span>
        <span>共{{commentTotal}}条评论</span>
      </div>
      <div class="make clearfix">
        <textarea placeholder="期待你的神评论......" v-model="text"></textarea>
        <div class="count">
          <span v-if="(300-text.length)>=0">剩余&nbsp;<span>{{300-text.length}}</span>&nbsp;字</span>
          <span class="limit" v-else>超过&nbsp;<span>{{300-text.length}}</span>&nbsp;字</span>
        </div>
        <div class="btn">
          <span class="iconfont icon-xiaolian"></span>
          <span>发表评论</span>
        </div>
      </div>
    </div>
    <div class="show_comment">
      <div class="hot_comment" v-if="hotCommentTotal">
        <div class="title">精彩评论({{hotCommentTotal}})</div>
        <ul class="comment_detail">
          <li class="clearfix" v-for="(list,index) in hotCommentList">
            <div class="per_img">
              <img :src="list.avatarurl" alt="" class="per">
            </div>
            <div class="per_info">
              <span class="name">{{list.nick}}</span>
              <!--<span class="isTop">置顶</span>-->
              <img :src="list.vipicon" alt="">
              <div class="comment-content" v-if="!list.middlecommentcontent">{{list.rootcommentcontent}}</div>
              <div class="comment-content" v-else>
                <p>回复<span>{{list.middlecommentcontent[0].replyednick}}</span>:{{list.middlecommentcontent[0].subcommentcontent}}</p>
                <p>{{list.rootcommentcontent}}</p>
              </div>
              <span class="time">{{new Date(list.time*1000).toLocaleDateString()}}&nbsp;{{new Date(list.time*1000).toLocaleTimeString()}}</span>

            </div>
            <div class="per_more">
              <span class="report">举报</span>
              <span class="iconfont icon-z-like">&nbsp;&nbsp;{{list.praisenum}}</span>
              <span class="iconfont icon-pinglun"></span>
            </div>
          </li>
        </ul>
      </div>
      <div class="new_comment" v-if="commentTotal">
        <div class="title">最新评论({{commentTotal}})</div>
        <ul class="comment_detail">
          <li class="clearfix" v-for="(list,index) in commentList">
            <div class="per_img">
              <img :src="list.avatarurl" alt="" class="per">

            </div>
            <div class="per_info">
              <span class="name">{{list.nick}}</span>
              <!--<span class="isTop">置顶</span>-->
              <img :src="list.vipicon" alt="">
              <div class="comment-content" v-if="!list.middlecommentcontent" v-html="list.rootcommentcontent"></div>
              <div class="comment-content" v-else>
                  <p>回复<span>{{list.middlecommentcontent[0].replyednick}}</span>:<span v-html="list.middlecommentcontent[0].subcommentcontent"></span></p>
                  <p v-html="list.rootcommentcontent"></p>
              </div>
              <span class="time">{{new Date(list.time*1000).toLocaleDateString()}}&nbsp;{{new Date(list.time*1000).toLocaleTimeString()}}</span>

            </div>
            <div class="per_more">
              <span class="report">举报</span>
              <span class="iconfont icon-z-like">&nbsp;&nbsp;{{list.praisenum}}</span>
              <span class="iconfont icon-pinglun"></span>
            </div>
          </li>
        </ul>
        <div class="load">
          <p v-if="info.pageSize<commentTotal" @click="loadingMore"><span>点击加载更多</span><span class="iconfont icon-xiangxia"></span></p>
          <p class="load-over" v-else><span>加载完毕</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    let that={}
    export default {
        name: "Comment",
        props:{
          album_id:Number
        },
        data(){
          return{
            commentTotal:0,
            hotCommentTotal:0,
            commentList:[],
            hotCommentList:[],
            text:'',
            info:{
              currentPage:0,
              pageSize:25,
            }
          }
        },
        methods:{
          loadingMore(){
            if(this.info.pageSize<this.commentTotal){
              this.info.pageSize+=25;
            }
            // console.log(this.info.pageSize);
          }
        },
        computed:{
          ...mapState(['comment'])
        },
        watch:{
          comment(value){
            // console.log(value);
            this.commentTotal=value.comment.commenttotal
             this.hotCommentTotal=value.hot_comment.commenttotal
             this.commentList=value.comment.commentlist
             this.hotCommentList=value.hot_comment.commentlist
          },
          info:{
            handler:(value)=>{
              that.$store.dispatch('getComment',{id:that.$route.params.id,rootcommentid:`album_${that.$route.params.id}_1003310416_1558068713`,pagenum:0,pagesize:value.pageSize})
            },
            deep:true
          }
        },
        mounted(){
          that=this
          console.log(this.album_id);
          this.$store.dispatch('getComment',{id:this.$route.params.id,rootcommentid:`album_${this.$route.params.id}_1003310416_1558068713`,pagenum:0,pagesize:25})
        },
    }
</script>

<style scoped lang="less">
  .comment {width: 1200px;margin: 0 auto;padding: 50px 0px;min-height: 400px}
  .comment .make_comment{margin-bottom: 20px}
  .comment .make_comment .title{margin-bottom: 19px;}
  .comment .make_comment .title span:first-child{font-size: 23px;margin-right: 14px}
  .comment .make_comment .title span:last-child{color: #999;}
  .comment .make_comment .make{position: relative;width: 857px;}
  .comment .make_comment .make textarea{width: 857px;height: 106px;background-color:#f5f5f5;padding: 14px;border: 1px solid #ececec;box-sizing: border-box;outline: none;resize: none}
  .comment .make_comment .make textarea::placeholder{color: #999;font-size: 13px}
  .comment .make_comment .make .count{position: absolute;top:78px;left:778px;color: #999;font-size: 13px}
  .comment .make_comment .make .count >span span{color: #31c27c}
  .comment .make_comment .make .count .limit span{color: #ff231a}
  .comment .make_comment .make .btn{float: right;margin: 17px 0px}
  .comment .make_comment .make .btn .iconfont{cursor: pointer;margin-right: 10px;font-size: 24px;color: #31c27c}
  .comment .make_comment .make .btn>span:last-child{background-color: #31c27c;cursor: pointer;color: white;padding: 8px 12px;vertical-align: 4px}
  .comment .make_comment .make .btn>span:last-child:hover{background-color: #2caf6f}

  .comment .show_comment{width: 875px}
  .comment .show_comment .hot_comment{margin-bottom: 30px}
  .comment .show_comment .title{font-size: 16px;padding-bottom: 20px;}
  .comment .show_comment .comment_detail{width: 875px}
  .comment .show_comment .comment_detail li:first-child{border-top: 1px solid #ededed}
  .comment .show_comment .comment_detail li{width:100%;display: inline-block;padding-top: 19px;border-bottom: 1px solid #ededed;}
  .comment .show_comment .comment_detail .per_img{cursor:pointer;width:40px;float: left;position: relative;margin-right: 18px}
  .comment .show_comment .comment_detail .per_img .per{width: 40px;height: 40px;border-radius: 50%}
  .comment .show_comment .comment_detail .per_img .per_tag{width: 15px;height: 15px;position: absolute;bottom: 0px;right: 0px}
  .comment .show_comment .comment_detail .per_info{overflow: hidden;font-size: 14px}
  .comment .show_comment .comment_detail .per_info .comment-content{font-size:14px;margin-bottom:8px;margin-top:5px;line-height: 2;}
  .comment .show_comment .comment_detail .per_info .comment-content span{color: #31c27c;cursor: pointer}
  .comment .show_comment .comment_detail .per_info .comment-content >p:last-child{padding-left: 10px;color: #999;border-left: 1px solid #ccc;margin-left: 10px;}
  .comment .show_comment .comment_detail .per_info .name{color: #999;}
  .comment .show_comment .comment_detail .per_info .name:hover{color: #2caf6f;cursor: pointer}
  /*.comment .show_comment .comment_detail .per_info .isTop{border: 1px solid #000;font-size: 12px;padding: 0px 3px;vertical-align: 1px;border-radius: 2px}*/
  .comment .show_comment .comment_detail .per_info .time{color: #999}
  .comment .show_comment .comment_detail .per_more{float: right;width: 220px;position: relative;top:-20px}
  .comment .show_comment .comment_detail .per_more>span{margin-left: 28px}
  .comment .show_comment .comment_detail .per_more>span:hover{color: #2caf6f;cursor: pointer}
  .comment .show_comment .comment_detail .per_more>span:first-child{opacity: 0;}
  .comment .show_comment .comment_detail .per_more .icon-z-like{color: #999;}
  .comment .show_comment .comment_detail .per_more .icon-pinglun{font-size: 20px;vertical-align: -2px;}
  .comment .show_comment .comment_detail li:hover .per_more span:first-child{opacity: 1}
  .comment .show_comment .load{width: 857px;text-align: center;color: #999;margin-top: 20px;}
  .comment .show_comment .load:hover{color: #2caf6f;cursor: pointer}
  .comment .show_comment .load:hover .load-over{color: #999;}
</style>
